<template>
  <div ref="print" class="model-container Details">
    <div class="listName">
      <span>订单信息</span>
      <div class="no-print">
        <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
        <el-button size="small" type="primary" plain @click="print">打印</el-button>
      </div>
    </div>

    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">买家信息</div>
      </div>
      <div v-if="orderArr.member !== null" class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">会员账号：</div>
            <div class="order_text">{{ orderArr.member.nickName }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">联系电话：</div>
            <div class="order_text">{{ orderArr.member.mobilePhone }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单编号：</div>
            <div class="order_text">{{ orderArr.orderNo }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">支付方式：</div>-->
          <!--<div class="order_text">{{ payTypeVal(orderArr.payType) }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">商品总金额：</div>
            <div class="order_text">{{ orderArr.realPayableAmount }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">下单时间：</div>
            <div class="order_text">{{ orderArr.createTime }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">是否开发票：</div>-->
          <!--<div class="order_text">{{ orderArr.isNeedInvoice }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单应付金额：</div>
            <div class="order_text">{{ orderArr.realPayableAmount }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">订单实付金额：</div>-->
          <!--<div class="order_text">{{ orderArr.realPaid }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单状态：</div>
            <div class="order_text">{{ orderStatusVal(orderArr.orderStatus) }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送状态：</div>
            <div class="order_text">{{ deliveryStatusVal(orderArr.deliveryStatus) }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送费用：</div>
            <div class="order_text">{{ orderArr.deliveryFee }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">买家留言：</div>
            <div class="order_text">{{ orderArr.buyerMemo }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card v-if="orderArr.orderPackage !== null">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">物流信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">物流单号：</div>
            <div class="order_text">{{ orderArr.orderPackage.waybillNo }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">物流公司：</div>
            <div class="order_text">{{ orderArr.orderPackage.logisticsCompName }}</div>
          </el-col>

        </el-row>
      </div>
    </el-card>

    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单商品</div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!orderArr.orderItems" :stripe="true" :data="orderArr.orderItems" empty-text="暂无数据">

          <el-table-column align="center" prop="orderItemId" label="商品编号"/>

          <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" width="50px" height="50px">
            </template>
          </el-table-column>

          <el-table-column align="center" prop="itemName" label="商品名称"/>

          <el-table-column align="center" label="商品规格">
            <template slot-scope="scope">{{ scope.row.skuName }},{{ scope.row.skuSalesProps }}</template>
          </el-table-column>

          <!--<el-table-column align="center" prop="brandName" label="品牌"/>-->

          <el-table-column align="center" prop="quantity" label="数量"/>

          <el-table-column align="center" prop="price" label="商品单价"/>

          <!--<el-table-column align="center" prop="barcode" label="条形码"/>-->

        </el-table>
      </div>
    </el-card>

    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">配送信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">姓名：</div>
            <div class="order_text">{{ orderArr.orderAddress.contactPerson }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">联系方式：</div>
            <div class="order_text">{{ orderArr.orderAddress.contactMobile }}</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">邮政编码：</div>
            <div class="order_text">{{ orderArr.orderAddress.postCode }}</div>
          </el-col>
          <!--<el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">-->
          <!--<div class="order_name">配送方式：</div>-->
          <!--<div class="order_text">{{ deliveryTypeVal(orderArr.deliveryType) }}</div>-->
          <!--</el-col>-->
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">收货地址：</div>
            <div class="order_text">{{ orderArr.orderAddress.fullAddr }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      orderArr: null
    }
  },
  beforeMount() {
    this.orderArr = this.$route.params.order
  },
  methods: {
    goBack() {
      const flag = true;
      sessionStorage.setItem('orderList_flag', JSON.stringify(flag))
      if (this.type === 1) {
        this.$router.go(-1)
      } else {
        this.$router.push({
          name: '/v1/orderlist',
          params: {
            search: true
          }
        })
      }
    },
    print() {
      this.$print(this.$refs.print)
    },
    // 支付方式
    payTypeVal(type) {
      if (type === 1) {
        return '消费积分支付'
      } else if (type === 2) {
        return '余额支付'
      }
    },
    // 支付状态
    payStatusVal(type) {
      if (type === 0) {
        return '未支付'
      } else if (type === 1) {
        return '已支付'
      } else if (type === 2) {
        return '部分支付'
      }
    },
    // 配送状态
    deliveryStatusVal(type) {
      if (type === 0) {
        return '待备货'
      } else if (type === 1) {
        return '备货中'
      } else if (type === 2) {
        return '已出库'
      } else if (type === 3) {
        return '已发货'
      }
    },
    // 配送方式
    deliveryTypeVal(type) {
      if (type === 1) {
        return '快递'
      } else if (type === 2) {
        return '平邮'
      } else if (type === 3) {
        return 'EMS'
      } else if (type === 4) {
        return '上门自提'
      }
    },
    // 订单状态
    orderStatusVal(type) {
      if (type === 0) {
        return '新提交'
      } else if (type === 1) {
        return '待支付'
      } else if (type === 2) {
        return '待发货'
      } else if (type === 3) {
        return '待收货'
      } else if (type === 4) {
        return '已收货'
      } else if (type === 5) {
        return '已完成'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>

</style>
